{% extends 'sales/base.html' %}
{% load static %}
{% load paginate %}
{% block content %}

<div class="main_container">
  
  <div class="row marl">
    <div class="col-lg-12 text-right">
      <span class="d-inline"><a href="{% url 'common:create_user'%}" class="btn primary_btn"><i class="fa fa-plus"></i>
          Add New User</a></span>
    </div>
  </div>
  
  <div class="modal fade" id="pass_change_div" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header" style="padding:20px 50px;">
          <h4><span class="glyphicon glyphicon-lock"></span> Change Password</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body" style="padding:20px 50px;">
          <form role="form" id="chang_password_form" method="POST"
            action="{% url 'common:change_passsword_by_admin' %}">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> New Password</label>
              <input type="password" class="form-control" name="new_passwoord" id="new_passwoord"
                placeholder="New Password">
              <p id="password_eror" style="color:red"></p>
              <input type="hidden" id="useer_id" name="useer_id">
            </div>
            <button id="submit_password" type="submit" class="btn btn-success btn-block"><span
                class="glyphicon glyphicon-off"></span> Change</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  

  <div class="filter_row list_filter_row row marl">
    <div class="col-md-12">
      <div class="card">
        <div class="card-body">
          <form id="users_filter" method="POST" action="">
            <div class="card-body">
              <div class="card-title">Filters</div>
              <div class="row marl">
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Name</label>
                    <input type="text" class="form-control" placeholder="Username" name="username" {% if request.POST %}
                      value="{{request.POST.username}}" {%endif%} />
                  </div>
                </div>
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email</label>
                    <input type="text" class="form-control" placeholder="email" name="email" {% if request.POST %}
                      value="{{request.POST.email}}" {%endif%} minlength="2"/>
                  </div>
                </div>
                <input type="hidden" name="tab_status" id="tab_status">
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">User Roles</label>
                    <select class="form-control" id="id_roles" name="role">
                      <option value="">--Select Roles--</option>
                      {% for role in roles %}
                      <option value="{{role.0}}" {% if request.POST.role %}
                        {% ifequal role.0 request.POST.role %}selected{% endifequal %}{% endif %}>{{ role.1 }}
                      </option>
                      {% endfor%}
                    </select>
                  </div>
                </div>
                <div class="filter_col col-md-2">
                  <div class="form-group">
                    <label for="exampleInputEmail1">User Status</label>
                    <select class="form-control" id="id_user_status" name="status">
                      <option value="">--Select Status--</option>
                      {% for value in status %}
                      <option value="{{value.0}}" {% if request.POST.status %}
                        {% ifequal value.0 request.POST.status %}selected{% endifequal %}{% endif %}>{{ value.1 }}
                      </option>
                      {% endfor%}
                    </select>
                  </div>
                </div>
                <div class="filter_col col-lg-2">
                  <div class="form-group buttons_row">
                    <button class="btn btn-primary save" type="submit">Search</button>
                    <a href="{% url 'common:users_list' %}" class="btn btn-default clear">Clear</a>
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  
  
  <div class="filter_row row marl">
    <div class="col-md-12 col-lg-12 col-xl-12">
      <div class="table_container_row row marl no-gutters">
        <div class="col-md-12">
          <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="open-tab" data-toggle="tab" href="#open" role="tab" aria-controls="open"
                aria-selected="true">Active Users ({{active_users|length}})</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="close-tab" data-toggle="tab" href="#close" role="tab" aria-controls="close"
                aria-selected="false">Inactive Users ({{inactive_users|length}})</a>
            </li>
          </ul>
          <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="open" role="tabpanel" aria-labelledby="open">
              <div class="card">
                <div class="card-body">
                  <div class="panel-heading-list card-title text-right">
                    <span class="total_count float-left">Active Users - {% if show_pageitems %}
                      {% show_pageitems %}{% else %}{{active_users|length}}{% endif %}</span>
                    <span class="filter_toggle ">
                      <a href="#" class="primary_btn"><i class="fas fa-filter"></i></a>
                    </span>
                  </div>
                  <div class="table-responsive">
                    <table class="table ">
                      <thead>
                        {% if active_users|length > 0 %}
                        <tr>
                          <th width="20%">Username</th>
                          <th width="20%">Created</th>
                          <th width="20%">Email Address</th>
                          <th width="8%">User Role</th>
                          <th width="8%">Permissions</th>
                          <th width="15%">Status</th>
                          <th width="20%">Actions</th>
                        </tr>
                        {% endif %}
                      </thead>
                      <tbody>
                        {% if per_page %}
                        {% paginate per_page active_users %}
                        {% else %}
                        {% paginate 10 active_users %}
                        {% endif %}
                        {% for user in active_users %}
                        <tr class="text-center">
                          <td><a href="{% url 'common:view_user' user.id %}">{{ user.username }}</a></td>
                          <td data-toggle="tooltip" title="{{user.date_joined}}">{{user.date_joined.date|timesince}}
                          <td>{{ user.email }}</td>
                          <td class="user_role">{% if user.is_superuser %} ADMIN {% else %} {{user.role}} {% endif %}
                          </td>
                          <td>
                            {% if user.is_superuser or user.role == 'ADMIN' %}
                            Sales, Marketing
                            {% else %}
                            {% if user.has_sales_access and user.has_marketing_access %}
                            Sales, Marketing
                            {% elif user.has_sales_access and not user.has_marketing_access %}
                            Sales
                            {% elif not user.has_sales_access and user.has_marketing_access %}
                            Marketing
                            {% else %}
                            {{''}}
                            {% endif %}
                            {% endif %}
                          </td>
                          <td>
                            {% ifnotequal request.user user  %}
                            <a {% if user.is_active %}
                              onclick="return confirm('Are you sure you want to deactivate this user?')" {% else %}
                              onclick="return confirm('Are you sure you want to activate this user?')" {% endif %}
                              href="{% url 'common:change_user_status' pk=user.id %}" class="on_off"
                              style="color: #454545; text-decoration: none;">
                              {% if user.is_active == True %}
                              <i class="fa fa-toggle-on"></i> Active
                              {% else %}
                              <i class="fa fa-toggle-off"></i> InActive
                              {% endif %}
                            </a>
                            {% else %}
                            Active
                            {% endifnotequal %}
                          </td>
                          <td class="actions">
                            
                            {% if user.email != admin_email  or request.user.email == admin_email %}
                            <a href="{% url 'common:edit_user' user.id %}" class="btn btn-success edit action"><i
                                class="fas fa-pencil-alt"></i>Edit</a>
                            {% endif %}
                            <a href="{% url 'common:remove_user' user.id %}" class="btn btn-danger remove_active_user trash action"
                              {% if request.user.email == user.email %} style="visibility: hidden;" {% endif %}><i
                                class="fas fa-trash-alt"></i>Delete</a>
                            {% if user.email != admin_email and request.user != user %}
                            <a style="color:black;margin-bottom: -11px;" data-id="{{user.id}}" href=""
                              class="fa-passwd-reset fa-stack" title="Change Password"><i class="fa fa-undo fa-stack-2x"></i><i
                                class="fa fa-lock fa-stack-1x"></i></a>
                            {% endif %}
                          </td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                  {% ifequal active_users|length 0 %}
                  <h6 class="text-center">No Active Users Found</h6>
                  {% endifequal %}
                  <div class="text-center row marl">
                    {% show_pages %}
                  </div>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="close" role="tabpanel" aria-labelledby="close">
              <div class="card">
                <div class="card-body">
                  <div class="panel-heading-list card-title text-right">
                    <span class="total_count float-left">Inactive Users - {% if show_pageitems %}
                      {% show_pageitems %}{% else %}{{inactive_users|length}}{% endif %}</span>
                    <span class="filter_toggle ">
                      <a href="#" class="primary_btn"><i class="fas fa-filter"></i></a>
                    </span>
                  </div>
                  <div class="table-responsive">
                    <table class="table">
                      <thead>
                        {% if inactive_users|length > 0 %}
                        <tr>
                          <th width="20%">Username</th>
                          <th width="20%">Email Address</th>
                          <th width="8%">User Role</th>
                          <th width="15%">Status</th>
                          <th width="20%">Actions</th>
                        </tr>
                        {% endif %}
                      </thead>
                      <tbody>
                        {% if per_page %}
                        {% paginate per_page inactive_users %}
                        {% else %}
                        {% paginate 10 inactive_users %}
                        {% endif %}
                        {% for user in inactive_users %}
                        <tr class="text-center">
                          <td><a href="{% url 'common:view_user' user.id %}">{{ user.username }}</a></td>
                          <td>{{ user.email }}</td>
                          <td class="user_role">{% if user.is_superuser %} ADMIN {% else %} {{user.role}} {% endif %}
                          </td>
                          <td>
                            {% ifnotequal request.user user  %}
                            <a {% if user.is_active %}
                              onclick="return confirm('Are you sure you want to deactivate this user?')" {% else %}
                              onclick="return confirm('Are you sure you want to activate this user?')" {% endif %}
                              href="{% url 'common:change_user_status' pk=user.id %}" class="on_off"
                              style="color: #454545; text-decoration: none;">
                              {% if user.is_active == True %}
                              <i class="fa fa-toggle-on"></i> Active
                              {% else %}
                              <i class="fa fa-toggle-off"></i> InActive
                              {% endif %}
                            </a>
                            {% else %}
                            Active
                            {% endifnotequal %}
                          </td>
                          <td class="actions">
                            
                            {% if user.email != admin_email  or request.user.email == admin_email %}
                            <a href="{% url 'common:edit_user' user.id %}" class="btn btn-success edit action"><i
                                class="fas fa-pencil-alt"></i>Edit</a>
                            {% endif %}
                            <a href="{% url 'common:remove_user' user.id %}" class="btn btn-danger remove_inactive_user trash action"
                              {% if request.user.email == user.email %} style="visibility: hidden;" {% endif %}><i
                                class="fas fa-trash-alt"></i>Delete</a>
                            {% if user.email != admin_email and request.user != user %}

                            <a style="color:black;margin-bottom: -11px;" data-id="{{user.id}}" href=""
                              class="fa-passwd-reset fa-stack" title="Change Password"><i class="fa fa-undo fa-stack-2x"></i><i
                                class="fa fa-lock fa-stack-1x"></i></a>{% endif %}
                          </td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                  </div>
                  {% ifequal inactive_users|length 0 %}
                  <h6 class="text-center">There are no users</h6>
                  {% endifequal %}
                  <div class="text-center row marl">
                    {% show_pages %}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <br clear="all">
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}
{% block js_block %}
<script type="text/javascript">
  $(document).ready(function () {
    $(".filter_toggle").click(function () {
      $(".list_filter_row").toggle();
    });
    if ($('#id_user_status').val() === 'False') {
      $('#close-tab').click()
    }
  });

  $('.remove_active_user').click(function (e) {
    e.preventDefault()
    url = $(this).attr('href')
    if (!confirm('Are you sure you want to delete?'))
      return;
    window.location = $(this).attr('href')
  });

  $('.remove_inactive_user').click(function (e) {
    e.preventDefault()
    url = $(this).attr('href')
    if (!confirm('Are you sure you want to delete?'))
      return;
    window.location = $(this).attr('href')
  });

</script>
<script>
  $(document).ready(function () {
    var user_id;
    $(".fa-passwd-reset").click(function (e) {
      e.preventDefault();
      user_id = $(this).attr('data-id')
      $("#password_eror").text("");
      $("#pass_change_div").modal();
    });



    $("#submit_password").click(function (e) {
      e.preventDefault();
      if ($("#new_passwoord").val().length < 4) {
        $("#password_eror").text("* Password must be atleast 4 characters long! ")
      }
      else {
        $("#password_eror").text("");
        $('#useer_id').val(user_id);
        $("#chang_password_form").submit()
      }
    });
    $("a[rel='page']").click(function (e) {
      e.preventDefault();
      $('#users_filter').attr("action", $(this).attr("href"));
      $('#users_filter').submit();
    });
  });
</script>
{% endblock js_block %}
